package myJs.cps.project

import myJs.Implicits._
import myJs.api.Api
import myJs.cps.Style
import myJs.myPkg.jquery.$
import myJs.myPkg._
import myJs.tool.Tool
import org.scalajs.dom.{Blob, BlobPropertyBag, html, window}
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.Sample.SampleInfo
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.React
import slinky.web.SyntheticMouseEvent
import slinky.web.html._
import typings.csstype.csstypeStrings

/**
 * Created by yz on 21/1/2022
 */
@react object QrcodeCp {

  case class Props(sampleId: String, key: String = "")

  val component = FunctionalComponent[Props] { props =>

    val divRef = React.createRef[html.Div]

    object FTool {

      def printSingle = (e: SyntheticMouseEvent[button.tagType#RefType]) => {
        val y = $(e.target).parents(".qrcodeBox")
        $("#prepare_print_block").html($(y).outerHTML)
        $("#prepare_print_block").find(".qrcodeBox .print-download-btns-parent").remove()
        Tool.printClick
      }

      def downloadSingleQrCode = (e: SyntheticMouseEvent[button.tagType#RefType]) => {
        val y = $(e.target).parents(".qrcodeBox").find(".img")
        val id = $(y).find("p").text().trim.replaceAll("^PN:", "")
        DomToImage.toPng(y(0)).toFuture.map { url =>
          val fileName = s"${id}.png"
          val base64 = url.replaceAll("^data:image/png;base64,", "")
          val byteArrays = Tool.base642binaryArray(base64)
          val blob = new Blob(byteArrays, new BlobPropertyBag {
            `type` = "image/png"
          })
          FileSaver.saveAs(blob, fileName)
        }
        ()
      }

      def refreshQrcode = {
        val textInfo = s"http://${window.location.host}/#/wechatMember/sampleView?id=${props.sampleId}"
        val options = QrCodeSvgOptions(
          content = textInfo,
          container = "svg-viewbox",
          join = true,
          padding = 1,
        )
        val svg = new QrCodeSvg(options).svg()
        $(divRef.current).find(s".svg").html(svg)
      }

    }

    useEffect(() => {
      if (props.sampleId.nonBlank) {
        FTool.refreshQrcode
      }
    }, List(props.sampleId)
    )

    div(key := s"${props.key}", className := "qrcodeBox", ref := divRef,
      style := Style(backgroundColor = "#fff", marginRight = 15, marginLeft = 15),
      div(className := "img", style := Style(backgroundColor = "#fff"),
        div(className := "svg",
          style := Style(width = 200, height = 200, flex = 0),
        ),
        p(style := Style(textAlign = csstypeStrings.center, marginBottom = 0, fontSize = 18, marginTop = 0,
          wordBreak = csstypeStrings.`break-all`
        ),
          className := "img-center-text", s"PN:${props.sampleId}"),
      ),
      div(className := "print-download-btns-parent",
        button(className := "printOne", "打印", onClick := FTool.printSingle),
        button(className := "downloadOne", "下载", onClick := FTool.downloadSingleQrCode)
      )
    )

  }


}
